<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" :collapse="false" @filterChange="changeHandler" @onCollapse="collapseHandle" />
    <FilterTable
      ref="table"
      columnsRef="maintenanceBoutique"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      selectionType="single"
      :onRowSelectChange="rowSelectHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="moreActions">
        <span @click="removeRecordHandle">删除数据</span>
      </template>
      <template slot="controls">
        <el-button size="small" type="primary" @click="addRecordHandle">新建</el-button>
        <el-button size="small" type="primary" @click="checkRecordHandle">审核</el-button>
        <el-button size="small" type="primary" @click="handlePrint">打印派工单</el-button>
      </template>
    </FilterTable>
    <!-- 新建弹窗 -->
    <Drawer :visible.sync="actions.visible" :title="actions.title" :width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <decorActionPanel :type="actions.type" :formData="editData" @close="closeActionPanel" />
    </Drawer>
    <!-- 派工单打印组件 -->
    <BasePrint ref="print" :data="prinrData" template="part/qualityManagement/decorationDispathOrder/templateDecorationPrint" />
  </div>
</template>

<script>
// 数据字典/按钮权限
import { dictionary } from '@/utils/dictMixin';
import { authority } from '@/utils/authMixin';
import { confirmAction, notifyAction } from '@/utils';

import { getList, getPrintData, orderDelete, orderCheck } from '@/api/part/qualityManagement/decorationDispatchOrder';
import decorActionPanel from './decorActionPanel';

export default {
  name: 'CardType',
  components: {
    decorActionPanel
  },
  mixins: [dictionary, authority],
  data() {
    this.selectedRow = [];
    this.editData = {};
    return {
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchApi: getList,
      fetchParams: {},
      actions: { visible: false, type: '', title: '' }, // 弹出面板的相关信息,
      isChoice: true, // 按钮是否可以选择
      prinrData: {} // 打印的数据
    };
  },
  methods: {
    createTopFilters() {
      return [
        {
          type: 'RANGE_DATE',
          label: '计划日期',
          style: { minWidth: '200px' },
          fieldName: 'startTime|endTime'
        },

        {
          type: 'SELECT',
          label: '工单状态',
          fieldName: 'roStatus',
          placeholder: '请选择',
          itemList: this.createDictList('9704'),
          initialValue: ''
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editRecordHandle(props.row)}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '装饰派工单号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '对应整车销售单号',
          dataIndex: 'saleOrderNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '底盘号',
          dataIndex: 'vin',
          width: 150,
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'licenseTag',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '车型代码',
          dataIndex: 'model',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户代码',
          dataIndex: 'customerNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工日期',
          dataIndex: 'orderDate',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '工单状态',
          dataIndex: 'roStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('9704'),
          render: props => {
            return <span>{this.createDictText(props.row.roStatus, '9704')}</span>;
          }
        },
        {
          title: '操作员',
          dataIndex: 'whManagerId',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作日期',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          dateFormat: 'yyyy-MM-dd',
          filterType: 'date-range'
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '会员卡号',
          dataIndex: 'cardNo',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    addRecordHandle() {
      this.actions = { visible: true, type: 'add', title: '新增维护装饰派工单' };
    },
    editRecordHandle(row) {
      if (!row) return;
      this.editData = row;
      this.actions = { visible: true, type: 'edit', title: '编辑维护装饰派工单' };
    },
    changeHandler(val) {
      this.fetchParams = { ...val };
    },
    rowSelectHandle(rows) {
      this.selectedRow = rows[0];
    },
    // 移除数据记录
    async removeRecordHandle() {
      try {
        await confirmAction('此操作将删除该记录, 是否继续?');
        const res = await orderDelete({ id: this.selectedRow.id });
        if (res.resultCode === 200) {
          notifyAction('删除数据成功！');
          // 执行刷新
          this.refreshHandle();
        }
      } catch (e) {}
    },
    // 移除数据记录
    async checkRecordHandle() {
      try {
        if (this.selectedRow.length == 0) {
          return this.$notify.warning({ title: '提示信息', message: '请选择需要审核的数据！' });
        }

        const res = await orderCheck({ id: this.selectedRow.id });
        console.log(res, '审核订单');

        if (res.resultCode === 200) {
          notifyAction('审核订单成功！');
          // 执行刷新
          this.refreshHandle();
        }
      } catch (e) {}
    },
    // 主页面刷新
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    },
    // 操作面板关闭
    closeActionPanel(val, type) {
      this.actions.visible = val;
      // 重置 editData
      this.editData = {};
      // 执行刷新
      type === 'refresh' && this.refreshHandle();
    },
    // 适配 BaseTable 组件
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    // 点击打印
    async handlePrint() {
      if (this.selectedRow) {
        console.log(this.selectedRow);
        let res = await getPrintData({
          id: this.selectedRow.id
        });
        if (res.resultCode == 200) {
          this.prinrData = res.data;
          this.$refs.print.EXCUTE_PRINT();
        }
      } else {
        notifyAction('请选择需要打印的派工单', 'warning');
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
